<template>
  <div>
    <el-form :model="form" label-width="auto" style="max-width: 1000px; display: flex; flex-wrap: nowrap;">
      <el-form-item label="活动编号:" style="width: 300px">
        <el-input v-model="form.activityId" />
      </el-form-item>
      <el-form-item label="活动名称:" style="width: 300px">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="服务类型" style="width: 300px">
        <el-select v-model="form.type">
          <el-option label="满减" value="1" />
          <el-option label="折扣" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="发放状态" style="width: 300px">
        <el-select v-model="form.status">
          <el-option label="待生效" value="1" />
          <el-option label="进行中" value="2" />
          <el-option label="已失效" value="3" />
          <el-option label="作废" value="4" />
        </el-select>
      </el-form-item>
      <el-button @click="findList()" type="primary">查询</el-button>
      <el-button @click="cleanForm()" type="primary">清空</el-button>
    </el-form>
    <el-button @click="dialogVisible = true" type="success">新增</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="activityId" label="活动编号"/>
      <el-table-column prop="activityname" label="活动名称">
        <template #default="scope">
         {{ scope.row.activity.activityname }}
        </template>
      </el-table-column>
      <el-table-column prop="type" label="优惠券类型" >
        <template #default="scope">
          <el-tag v-if="scope.row.type==1" type="primary">满减</el-tag>
          <el-tag v-if="scope.row.type==2" type="success">折扣</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="discountAmount" label="满额限制（元）" />
      <el-table-column prop="discountRate" label="折扣金额（元）/比例" />
      <el-table-column prop="fanw" label="使用范围" >
        <template #default="scope">
         {{ scope.row.activity.fanw }}
        </template>
      </el-table-column>
      <el-table-column prop="duix" label="适用对象" >
        <template #default="scope">
         {{ scope.row.activity.duix }}
        </template>
      </el-table-column>
      <el-table-column prop="distributeStartTime" label="发放时间" >
        <template #default="scope">
         {{ scope.row.activity.distributeStartTime }}
        </template>
      </el-table-column>
      <el-table-column prop="distributeEndTime" label="结束时间" >
        <template #default="scope">
         {{ scope.row.activity.distributeEndTime }}
        </template>
      </el-table-column>
      <el-table-column prop="validityDays" label="使用期限（天）" >
        <template #default="scope">
         {{ scope.row.activity.validityDays }}
        </template>
      </el-table-column>
      <el-table-column prop="totalNum" label="发放数量（张）" >
        <template #default="scope">
         {{ scope.row.activity.totalNum }}
        </template>
      </el-table-column>
      <el-table-column prop="xianl" label="每人限领（张）" >
        <template #default="scope">
         {{ scope.row.activity.xianl }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="发放状态" >
        <template #default="scope">
          <el-tag v-if="scope.row.activity.status==1" type="primary">待生效</el-tag>
          <el-tag v-if="scope.row.activity.status==2" type="success">进行中</el-tag>
          <el-tag v-if="scope.row.activity.status==3" >已失效</el-tag>
          <el-tag v-if="scope.row.activity.status==4" type="danger">作废</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="createTime" label="操作">
        <template #default="scope">
          <el-link @click="deleteCoupon(scope.row.id)" type="danger">撤销</el-link>
          <el-link @click="open(scope.row)" type="primary">编辑</el-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="form.pageNum"
        v-model:page-size="form.pageSize"
        :page-sizes="[25, 50, 75, 100]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="添加优惠券"
      width="500"
      :before-close="handleClose"
    >
      <el-form :model="addForm" label-width="auto" style="max-width: 600px">
        <el-form-item label="优惠券名称:">
          <el-input v-model="addForm.name" />
        </el-form-item>
        <el-form-item label="活动名称:">
          <el-select v-model="addForm.activityId">
            <div v-for="item in serveTypeList" :key="item.id">
              <el-option :label="item.activityname" :value="item.id" />
            </div>
          </el-select>
        </el-form-item>
        <el-form-item label="服务类型" style="width: 300px">
          <el-select v-model="addForm.type">
            <el-option label="满减" value="1" />
            <el-option label="折扣" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="折扣:">
          <el-input v-model="addForm.discountRate" />
        </el-form-item>
        <el-form-item label="优惠金额:">
          <el-input v-model="addForm.discountAmount" />
        </el-form-item>
        <el-form-item label="满减金额:">
          <el-input v-model="addForm.amountCondition" />
        </el-form-item>
        <el-button @click="tijiao()">提 交</el-button>
        <el-button @click="closeAddForm()">取 消</el-button>
      </el-form>
    </el-dialog>


    <el-dialog
      v-model="updatedialog"
      title="修改优惠券"
      width="500"
      :before-close="handleClose"
    >
      <el-form :model="updForm" label-width="auto" style="max-width: 600px">
        <el-form-item label="优惠券名称:">
          <el-input v-model="updForm.name" />
        </el-form-item>
        <el-form-item label="活动名称:">
          <el-select v-model="updForm.activityId">
            <div v-for="item in serveTypeList" :key="item.id">
              <el-option :label="item.activityname" :value="item.id" />
            </div>
          </el-select>
        </el-form-item>
        <el-form-item label="服务类型" style="width: 300px">
          <el-select v-model="updForm.type">
            <el-option label="满减" value="1" />
            <el-option label="折扣" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="折扣:">
          <el-input v-model="updForm.discountRate" />
        </el-form-item>
        <el-form-item label="优惠金额:">
          <el-input v-model="updForm.discountAmount" />
        </el-form-item>
        <el-form-item label="满减金额:">
          <el-input v-model="updForm.amountCondition" />
        </el-form-item>
        <el-button @click="upTiJiao()">提 交</el-button>
        <el-button @click="closeUpdForm()">取 消</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {findAll,deleteOne,addCoupon,findActicity,updCoupon} from '@/api/coupon/coupon'
const tableData=ref([])
const form=ref({
  pageNum:1,
  pageSize:25
})
const total=ref()
function findList(){
  findAll(form.value).then(arr =>{
    tableData.value=arr.data.data.records
    total.value=arr.data.data.total
  })
}
findList()
const handleSizeChange = (val) => {
  form.value.pageSize=val
  findList()
}
const handleCurrentChange = (val) => {
  form.value.pageNum=val
  findList()
}
function cleanForm(){
  form.value.activityId=null
  form.value.name=null
  form.value.status=null
  form.value.type=null
}
function deleteCoupon(id){
  deleteOne(id).then(arr =>{
    ElMessage.success("删除成功")
    findList()
  })
}
const addForm=ref({})
const dialogVisible=ref(false)
function closeAddForm(){
  addForm.value={}
  dialogVisible.value=false
}
function tijiao(){
  addCoupon(addForm.value).then(arr =>{
    ElMessage.success("添加成功")
    dialogVisible.value=false
    findList()
  })
}
const serveTypeList=ref([])
function findAllActivity(){
  findActicity().then(arr =>{
    serveTypeList.value=arr.data.data
  })
}
findAllActivity()
const updatedialog=ref(false)
const updForm=ref({})
function open(row){
  updatedialog.value=true
  updForm.value=row
}
function closeUpdForm(){
  updForm.value={}
  updatedialog.value=false
}
function upTiJiao(){
  updCoupon(updForm.value).then(arr =>{
    ElMessage.success("修改成功")
    updatedialog.value=false
    findList()
  })
}
</script>

